import React from 'react';
import { Button, Tooltip } from 'antd';
import {
  Wand2,
  Scissors,
  ZoomIn,
  ImageIcon,
  Undo,
  Redo,
  Download,
  RotateCcw,
} from 'lucide-react';
import { useSelector } from 'react-redux';
import { RootState } from '../store';
import { useImageProcess } from '../hooks/useImageProcess';

const ToolPanel: React.FC = () => {
  const { isProcessing } = useSelector((state: RootState) => state.image);
  const {
    enhanceImage,
    removeBackground,
    upscaleImage,
    denoiseImage,
    undoAction,
    redoAction,
    downloadImage,
  } = useImageProcess();

  const tools = [
    {
      icon: <Wand2 className="w-4 h-4" />,
      label: 'AI增强',
      onClick: enhanceImage,
      tooltip: '使用AI技术增强图像质量',
    },
    {
      icon: <Scissors className="w-4 h-4" />,
      label: '背景移除',
      onClick: removeBackground,
      tooltip: '智能移除图像背景',
    },
    {
      icon: <ZoomIn className="w-4 h-4" />,
      label: '图像放大',
      onClick: () => upscaleImage(2),
      tooltip: '将图像放大2倍',
    },
    {
      icon: <ImageIcon className="w-4 h-4" />,
      label: '降噪处理',
      onClick: denoiseImage,
      tooltip: '减少图像噪点',
    },
  ];

  const actionButtons = [
    {
      icon: <Undo className="w-4 h-4" />,
      label: '撤销',
      onClick: undoAction,
      tooltip: '撤销上一步操作',
    },
    {
      icon: <Redo className="w-4 h-4" />,
      label: '重做',
      onClick: redoAction,
      tooltip: '重做上一步操作',
    },
    {
      icon: <Download className="w-4 h-4" />,
      label: '下载',
      onClick: () => downloadImage(),
      tooltip: '下载处理后的图像',
    },
  ];

  return (
    <div className="space-y-6">
      {/* AI工具 */}
      <div>
        <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
          AI工具
        </h3>
        <div className="space-y-2">
          {tools.map((tool, index) => (
            <Tooltip key={index} title={tool.tooltip} placement="right">
              <Button
                type="default"
                icon={tool.icon}
                loading={isProcessing}
                onClick={tool.onClick}
                className="w-full justify-start"
                disabled={isProcessing}
              >
                {tool.label}
              </Button>
            </Tooltip>
          ))}
        </div>
      </div>

      {/* 操作按钮 */}
      <div>
        <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
          操作
        </h3>
        <div className="space-y-2">
          {actionButtons.map((button, index) => (
            <Tooltip key={index} title={button.tooltip} placement="right">
              <Button
                type="default"
                icon={button.icon}
                onClick={button.onClick}
                className="w-full justify-start"
              >
                {button.label}
              </Button>
            </Tooltip>
          ))}
        </div>
      </div>

      {/* 快速操作 */}
      <div>
        <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
          快速操作
        </h3>
        <div className="grid grid-cols-2 gap-2">
          <Tooltip title="放大4倍" placement="top">
            <Button
              size="small"
              onClick={() => upscaleImage(4)}
              disabled={isProcessing}
            >
              4x放大
            </Button>
          </Tooltip>
          <Tooltip title="重置所有更改" placement="top">
            <Button
              size="small"
              icon={<RotateCcw className="w-3 h-3" />}
              onClick={() => window.location.reload()}
            >
              重置
            </Button>
          </Tooltip>
        </div>
      </div>
    </div>
  );
};

export default ToolPanel;